import React, { Component } from 'react'
import { connect } from 'react-redux'
import UserModel from '../interface/userinterface';
import AddUser from '../conponents/AddUser';
import ListUser from '../conponents/ListUser';

interface IState {
    list: UserModel[]
}
export class Page1 extends Component<any, IState>{
    constructor(props: any) {
        super(props);
        this.state = {
            list: [
                {
                    id: 1,
                    username: '大白',
                    userpwd: '123'
                },
                {
                    id: 2,
                    username: '小白',
                    userpwd: '321'
                },
                {
                    id: 3,
                    username: '大黄',
                    userpwd: '213'
                }
            ]
        }
    }
    addUserItem = (item: UserModel) => {
        this.setState({
            list: [...this.state.list, item]
        })
    }
    delUserById = (id: number | undefined) => {
        this.setState({
            list: this.state.list.filter(item => item.id !== id)
        })
    }
    render() {
        return (
            <div>
                <AddUser addUserItem={this.addUserItem}></AddUser>
                <ListUser list={this.state.list} delUserById={this.delUserById}></ListUser>
            </div>
        )
    }
}

const mapStateToProps = (state: IState) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(Page1)